<!DOCTYPE html>
<html lang="en">
<!--**
 *
 *----------Created by 黄伟峰 on 2018/4/13.----------
 * 　　　┏┓　　　┏┓
 * 　　┏┛┻━━━┛┻┓
 * 　　┃　　　　　　　┃
 * 　　┃　　　━　　　┃
 * 　　┃　┳┛　┗┳　┃
 * 　　┃　　　　　　　┃
 * 　　┃　　　┻　　　┃
 * 　　┃　　　　　　　┃
 * 　　┗━┓　　　┏━┛
 * 　　　　┃　　　┃神兽保佑
 * 　　　　┃　　　┃代码无BUG！
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　　　┣┓
 * 　　　　┃　　　　　　　┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 * ━━━━━━神兽出没━━━━━━by:web_hwf@sina.com
 *-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--响应式约束-->
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=no"/>
    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <style>
        .css-live-wrap {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div class="css-live-wrap">
    <hgroup class="percentage-pie">
        <svg width="100%" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)"
                  style="fill: #000">50.0%
            </text>
            <!-- Wave -->
            <g id="wave">
                <path id="wave-2" fill="rgba(154, 205, 50, .8)"
                      d="M 0 100 C 140.6 94.24 45.08 106.32 200 100 A 95 95 0 0 1 0 100 Z">
                    <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
                                                        M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
                                                        M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
                </path>
            </g>
            <circle cx="1920" cy="100" r="800" stroke-width="1000" stroke="white" fill="transparent"></circle>
        </svg>
    </hgroup>
</div>

<!--
<svg version="1.1" style="position: relative; width: 1920px; height: 453px; top: 0px; left: 0px;">
    <desc>
        <div style="position: absolute;top: 50px; left: 50px;">fasdfafadsfafafadfasdfasdfadf </div>
    </desc>
    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)"
          style="fill: #000">50.0%
    </text>
    <g transform="translate(35,50)">
        <g></g>
        <g clip-path="url(#AmChartsEl-38)">
            <path cs="100,100" d="M-86,247 C-43,247,1,254,87,247 C174,241,174,120,260,124 C347,128,346,324,433,330 C520,336,520,247,607,247 C694,247,694,336,780,330 C867,324,910,134,953,124  C967,324,990,134,1153,124 C1267,324,1310,134,1453,124" fill="#999999" fill-opacity="1" stroke-width="1" stroke-opacity="0" stroke="#00d856">
                <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M-86,247 C-43,247,4,254,57,247 C174,241,174,120,260,124 C347,128,346,324,433,330 C520,336,520,247,607,247 C694,247,694,336,780,330 C867,324,910,134,953,124  C967,324,990,134,1153,124 C1267,324,1310,134,1453,124"></animate>
            </path>
            <path cs="100,100" d="M-86,247 C-43,237,1,254,87,247 C174,241,174,120,260,124 C347,128,346,324,433,330 C520,336,520,247,607,247 C694,247,694,336,780,330 C867,324,910,134,953,124  C967,324,990,134,1153,124 C1267,324,1310,134,1453,124 L1953,371 L-86,371 L-86,247.33333333333334" fill="#00d856" fill-opacity=".5" stroke-width="0" stroke-opacity="0"></path>
        </g>
        <clipPath id="AmChartsEl-38">
            <rect x="0" y="0" width="1920" height="671" rx="0" ry="0" stroke-width="0"></rect>
        </clipPath>
        <g></g>
    </g>
    <clipPath id="AmChartsEl-34">
        <rect x="-1" y="-1" width="1041" height="373" rx="0" ry="0" stroke-width="0"></rect>
    </clipPath>
</svg>-->
</body>
</html>